<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人注册</title>
    <!-- 图标 -->
    <link rel="shortcut icon" href=" favicon.ico" />
    <!-- 引入我们初始化样式文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入我们的注册页的css -->
    <link rel="stylesheet" href="css/register.css">
    <!--  -->
    <link rel="stylesheet" href="css/common.css">
    <script src="./js/jquery-3.7.1.js"></script>
    <script src="./js/jquery.cookie.js"></script>
</head>

<body>
    <div class="w">
        <!-- 头部区域 -->
        <header>
            <a href="index.html">
                <img src="images/logo.png" alt="">
            </a>
        </header>
        <!-- 主体区域 -->
        <div class="registerarea1">
            <!-- 注册区域 -->
            <div class="registerarea">
                <h3>注册新用户
                    <div class="login">我有账号，去<a href="login.html">登录</a></div>
                </h3>
                <div class="register-form">
                    <ul>
                        <li><span id="text" for="">用户名：</span><input type="text" class="inp"><span id="username"
                                class="error"></span></li>
                        <li><span id="text" for="">手机号：</span><input type="text" class="inp"><span id="num"
                                class="error"></span></li>
                        <!-- <li><label for="">短信验证码：</label><input type="text" class="inp"><span class="success">保存成功</span>
                            </li> -->
                        <li><span id="text" for="">登录密码：</span><input type="password" class="inp"><span id="password"
                                class="error"></span></li>

                        <li class="safe">安全程度 <em>弱</em><em>中</em><em>强</em></li>

                        <li><span id="text" for="">确认密码：</span><input type="password" class="inp"><span id="repassword"
                                class="error"></span>
                        </li>

                        <li class="agree"><label><input type="checkbox">
                                同意协议并注册 <a>《知果果用户协议》</a></label></li>
                        <li><input type="button" value="完成注册" class="over"></li>
                    </ul>
                </div>
            </div>
            <!-- 底部模块 -->
            <footer>
                <div class="w">
                    <div class="mod_copyright">
                        <div class="links">
                            <a href="#">关于我们</a> |
                            <a href="#">联系我们</a> |
                            <a href="#">联系客服</a> |
                            <a href="#">商家入驻</a> |
                            <a href="#">营销中心</a> |
                            <a href="#">手机品优购</a> |
                            <a href="#">友情链接</a> |
                            <a href="#">销售联盟</a> |
                            <a href="#">品优购社区</a> |
                            <a href="#">品优购公益</a> |
                            <a href="#">English Site</a> |
                            <a href="#">Contact U</a>
                        </div>
                        <div class="copyright">地址:北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096 电话:400-618-4000 传真:010-82935100 邮箱:
                            zhanghj+itcast.cn <br> 京ICP备08001421号京公网安备110108007702</div>
                    </div>
                </div>
            </footer>
        </div>




        <script>
            $(function () {
                // 获取所有inp
                var $inp = $('.register-form ul .inp');
                // 用户名验证
                $inp.eq(0).blur(function () {
                    var len = $inp.eq(0).val().length;
                    if (len) {
                        if (len <= 6) {
                            $('.register-form #username').text('验证通过！');
                            $('.register-form #username').addClass('green');
                        }
                        else {
                            $('.register-form #username').text('用户名不能大于6位，请重新输入！');
                            $('.register-form #username').removeClass('green');
                        }
                    }
                    else {
                        $('.register-form #username').text('用户名不能为空！');
                        $('.register-form #username').removeClass('green');
                    }

                })

                // 手机号验证
                $inp.eq(1).blur(function () {
                    // 定义正则
                    var regex_num = /^1[3456789]\d{9}$/;
                    // 获取输入的手机号
                    var num = $inp.eq(1).val();
                    // 验证
                    if (num) {
                        if (regex_num.test(num)) {
                            $('.register-form #num').text('验证通过！');
                            $('.register-form #num').addClass('green');
                        }
                        else {
                            $('.register-form #num').text('手机号格式错误，请重新输入！');
                            $('.register-form #num').removeClass('green');
                        }
                    }
                    else {
                        $('.register-form #num').text('手机号不能为空！');
                        $('.register-form #num').removeClass('green');
                    }

                })


                // 密码验证
                $inp.eq(2).blur(function () {
                    //6到13位数字，低安全
                    var regex_password1 = /^\d{6,13}$/;
                    //密码必须符合由数字,大写字母,小写字母,至少其中两种组成，且长度不小于8，中安全
                    var regex_password2 = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)\S{8,}$/;
                    // var regex_password3 = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[#@!~%^&*.])[a-zA-Z\d#@!~%^&*.]{10,}$/;
                    var password = $inp.eq(2).val();
                    var $em = $('.register-form .safe em');

                    // 判断是否为空
                    if (password) {
                        // 低安全
                        if (regex_password1.test(password)) {
                            $('.register-form #password').text('验证通过！');
                            $('.register-form #password').addClass('green');
                            // :lt是选择小于给定索引的元素，不能这样$em.lt(0)用,也不能这样$em:lt(0)用
                            $('.register-form .safe em:lt(1)').addClass('em');
                        }
                        // 中安全
                        else if (regex_password2.test(password)) {
                            $('.register-form #password').text('验证通过！');
                            $('.register-form #password').addClass('green');
                            $('.register-form .safe em:lt(2)').addClass('em');
                        }
                        // 格式错误
                        else {
                            $('.register-form #password').text('密码格式错误，请重新输入！');
                            $('.register-form #password').removeClass('green');
                            $em.removeClass('em');
                        }
                    }
                    else {
                        // debugger
                        $('.register-form #password').text('密码不能为空！');
                        $('.register-form #password').removeClass('green');
                        $('.register-form .safe em:lt(3)').addClass('em');
                    }

                    if($inp.eq(3).val().length!=0){
                        $inp.eq(3).blur()
                    }

                })



                // 再次输入密码
                $inp.eq(3).blur(function () {
                    var password1 = $inp.eq(2).val();
                    var password2 = $inp.eq(3).val();
                    // 判断输入框是否为空
                    if (password2) {
                        // 判断两次密码是否一样
                        if (password2 == password1) {
                            // console.log('hhh');

                            $('.register-form #repassword').text('验证通过！');
                            $('.register-form #repassword').addClass('green');
                        }
                        else {
                            $('.register-form #repassword').text('两次输入密码不一样！');
                            $('.register-form #repassword').removeClass('green');
                        }
                    }
                    else {
                        $('.register-form #repassword').text('密码不能为空！');
                        $('.register-form #repassword').removeClass('green');
                    }

                })



                // 注册点击
                $('.register-form .over').click(function () {
                    // 获取每个输入框合法状态
                    var answer4 = $('.register-form #username').text();
                    var answer1 = $('.register-form #num').text();
                    var answer2 = $('.register-form #password').text();
                    var answer3 = $('.register-form #repassword').text();
                    // 获取复选框的状态
                    var inp = $('.register-form input[type=checkbox]').is(':checked');


                    // 判断四个输入框是否都合法
                    if (answer1 == '验证通过！' && answer2 == '验证通过！' && answer3 == '验证通过！' && answer4 == '验证通过！') {
                        // 判断复选框是否勾选
                        if (inp) {
                            // 将注册成功的手机号和密码存入cookie
                            var username = $inp.eq(0).val();
                            // alert(num);
                            var password = $inp.eq(2).val();
                            $.cookie('username', username, { path: '/', expires: 10 })
                            $.cookie('password', password, { path: '/', expires: 10 })
                            // 跳转到首页
                            window.location = 'login.html';
                        }
                        else {
                            alert('请阅读协议并同意！');
                        }
                    }
                    else {
                        alert('注册失败，请填写正确信息！');
                    }
                })
            })
        </script>
</body>

</html>